<template>
  <div class="app-container">
     <div class="filter-container">
      <el-form inline>
        <el-form-item label="商品前台分组：" class="filter-item">
          <el-cascader
            style="width:400px"
            expand-trigger="hover"
            :options="frontCategoryOptions"
            v-model="selectedOptionsFront"
            @change="handleOptionsFront">
          </el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <table-list :data="productList">
      <template slot="columns">
        <el-table-column fixed="left" label="商品信息" align="center" min-width="200px">
          <template slot-scope="scope">
            <div class="flex flex-item--center">
              <el-popover placement="top-start" trigger="hover">
                <img :src="scope.row.coverCn" class="previewImage">
                <img v-popover:popover :src="scope.row.coverCn" class="thumbnail" slot="reference">
              </el-popover>
              <span style="margin-left: 10px">{{scope.row.nameCn}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="前台商品类目" align="center">
          <template slot-scope="scope">
            {{ scope.row.categoryCn }}
          </template>
        </el-table-column>
        <el-table-column label="当前排序" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.sort" controls-position="right" :min="0" size="small" :precision="0"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button plain type="primary" size="mini" @click="clickToSort(scope.row)">保存排序</el-button>
          </template>
        </el-table-column>
      </template>
    </table-list>
    <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import listPagination from '@/components/ListPagination'
import { categoryFilter } from '@/filter'
import { getListCategory, getCategoryProductList, updateProductsSort } from '@/api/product'

export default {
  name: 'productSort',
  mixins: [list],
  components: {
    'table-list': table,
    listPagination
  },
  data () {
    return {
      frontCategoryId: '',
      frontCategoryList: [],
      selectedOptionsFront: [],
      productList: []
    }
  },
  computed: {
    frontCategoryOptions () {
      return this.frontCategoryList.map(categoryFilter)
    }
  },
  filters: {},
  created () {
    this.getCategoryList(1)
  },
  methods: {
    async getCategoryList (categorytype) {
      let { data } = await getListCategory({
        categorytype,
        pageNum: '',
        pageSize: ''
      })
      this.frontCategoryList = data

      this.frontCategoryList.some(item => {
        if (item.subdivision.length > 0) {
          this.frontCategoryId = item.subdivision[0].id
          this.selectedOptionsFront = [item.id, this.frontCategoryId]
          return true
        }
      })
      this.getList()
    },
    handleOptionsFront (frontIdList) {
      this.frontCategoryId = frontIdList[1]
      this.getList()
    },
    async getList () {
      let { data } = await getCategoryProductList({
        categoryId: this.frontCategoryId,
        pageNum: this.page,
        pageSize: this.pageSize
      })
      this.productList = data.list
      this.total = data.total
    },
    async clickToSort ({ sort, id }) {
      await updateProductsSort({
        sort,
        productId: id,
        categoryid: this.frontCategoryId
      })
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
